<template>
	<view class="color-demo-container">
		<!-- 页面标题 -->
		<view class="demo-header">
			<text class="demo-title">BrainCube 品牌色彩方案</text>
			<text class="demo-subtitle">基于认知科学的专业色彩体系</text>
		</view>

		<!-- 组件使用示例 -->
		<view class="color-section">
			<view class="section-title">组件使用示例</view>
			<text class="section-desc">展示如何在实际组件中应用品牌色彩</text>

			<!-- 按钮组件示例 -->
			<view class="component-demo">
				<text class="component-title">品牌按钮组件</text>
				<view class="button-grid">
					<BrandButton text="主要按钮" type="primary" @click="handleButtonClick" />
					<BrandButton text="次要按钮" type="secondary" @click="handleButtonClick" />
					<BrandButton text="成功按钮" type="success" @click="handleButtonClick" />
					<BrandButton text="警告按钮" type="warning" @click="handleButtonClick" />
					<BrandButton text="错误按钮" type="error" @click="handleButtonClick" />
					<BrandButton text="信息按钮" type="info" @click="handleButtonClick" />
					<BrandButton text="轮廓按钮" type="outline" @click="handleButtonClick" />
					<BrandButton text="加载中" type="primary" :loading="true" />
					<BrandButton text="禁用状态" type="primary" :disabled="true" />
				</view>
			</view>

			<!-- 卡片组件示例 -->
			<view class="component-demo">
				<text class="component-title">品牌卡片组件</text>
				<view class="card-grid">
					<BrandCard 
						title="默认卡片" 
						subtitle="基础样式展示" 
						variant="default" 
						:hoverable="true"
						@click="handleCardClick"
					>
						<text>这是一个默认样式的卡片组件，展示基础的品牌色彩应用。</text>
					</BrandCard>

					<BrandCard 
						title="主色调卡片" 
						subtitle="智慧蓝主题" 
						variant="primary" 
						:hoverable="true"
						status="success"
						@click="handleCardClick"
					>
						<text>使用智慧蓝作为主色调的卡片，适合重要信息展示。</text>
					</BrandCard>

					<BrandCard 
						title="渐变卡片" 
						subtitle="品牌渐变效果" 
						variant="gradient" 
						:hoverable="true"
						status="processing"
						@click="handleCardClick"
					>
						<text>采用品牌渐变色的卡片，营造现代科技感。</text>
					</BrandCard>

					<BrandCard 
						title="成功状态" 
						subtitle="测试完成" 
						variant="success" 
						:hoverable="true"
						status="success"
						@click="handleCardClick"
					>
						<text>表示成功状态的卡片，用于测试完成等场景。</text>
					</BrandCard>

					<BrandCard 
						title="警告提示" 
						subtitle="注意事项" 
						variant="warning" 
						:hoverable="true"
						status="warning"
						@click="handleCardClick"
					>
						<text>用于警告提示的卡片样式，引起用户注意。</text>
					</BrandCard>

					<BrandCard 
						title="错误状态" 
						subtitle="测试失败" 
						variant="error" 
						:hoverable="true"
						status="error"
						@click="handleCardClick"
					>
						<text>表示错误状态的卡片，用于错误提示等场景。</text>
					</BrandCard>
				</view>
			</view>
		</view>

		<!-- 主品牌色展示 -->
		<view class="color-section">
			<view class="section-title">主品牌色</view>
			<view class="color-grid">
				<view class="color-card primary-card">
					<view class="color-preview primary-color"></view>
					<view class="color-info">
						<text class="color-name">智慧蓝</text>
						<text class="color-code">#4A90E2</text>
						<text class="color-desc">理性思维、专业性</text>
					</view>
				</view>
				<view class="color-card secondary-card">
					<view class="color-preview secondary-color"></view>
					<view class="color-info">
						<text class="color-name">创新紫</text>
						<text class="color-code">#8B5FBF</text>
						<text class="color-desc">创造力、想象力</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 品牌渐变展示 -->
		<view class="color-section">
			<view class="section-title">品牌渐变</view>
			<view class="gradient-showcase">
				<view class="gradient-card main-gradient">
					<text class="gradient-text">主渐变</text>
					<text class="gradient-desc">智慧蓝 → 创新紫</text>
				</view>
				<view class="gradient-card reverse-gradient">
					<text class="gradient-text">反向渐变</text>
					<text class="gradient-desc">创新紫 → 智慧蓝</text>
				</view>
			</view>
		</view>

		<!-- 功能色彩展示 -->
		<view class="color-section">
			<view class="section-title">功能色彩</view>
			<view class="function-colors">
				<view class="function-card success-card">
					<view class="function-icon">✓</view>
					<text class="function-name">成功绿</text>
					<text class="function-code">#2ECC71</text>
				</view>
				<view class="function-card warning-card">
					<view class="function-icon">⚠</view>
					<text class="function-name">警告橙</text>
					<text class="function-code">#F39C12</text>
				</view>
				<view class="function-card error-card">
					<view class="function-icon">✕</view>
					<text class="function-name">错误红</text>
					<text class="function-code">#E74C3C</text>
				</view>
				<view class="function-card info-card">
					<view class="function-icon">ℹ</view>
					<text class="function-name">信息蓝</text>
					<text class="function-code">#3498DB</text>
				</view>
			</view>
		</view>

		<!-- 测试类型色彩 -->
		<view class="color-section">
			<view class="section-title">测试类型专用色</view>
			<view class="test-colors">
				<view class="test-card" v-for="(test, index) in testTypes" :key="index" :class="test.class">
					<view class="test-icon">{{ test.icon }}</view>
					<text class="test-name">{{ test.name }}</text>
					<text class="test-color">{{ test.color }}</text>
				</view>
			</view>
		</view>

		<!-- IQ等级色彩 -->
		<view class="color-section">
			<view class="section-title">IQ等级色彩</view>
			<view class="iq-levels">
				<view class="iq-card" v-for="(level, index) in iqLevels" :key="index" :class="level.class">
					<view class="iq-score">{{ level.range }}</view>
					<text class="iq-name">{{ level.name }}</text>
					<text class="iq-color">{{ level.color }}</text>
				</view>
			</view>
		</view>

		<!-- 文字层级展示 -->
		<view class="color-section">
			<view class="section-title">文字层级色彩</view>
			<view class="text-hierarchy">
				<text class="text-primary">主要文字 - 标题和重要内容</text>
				<text class="text-secondary">次要文字 - 正文和说明文字</text>
				<text class="text-tertiary">辅助文字 - 提示信息和次要说明</text>
				<text class="text-disabled">禁用文字 - 不可用状态</text>
			</view>
		</view>

		<!-- 交互演示 -->
		<view class="color-section">
			<view class="section-title">交互效果演示</view>
			<view class="interaction-demo">
				<view class="demo-buttons">
					<view class="demo-btn primary-btn">主要按钮</view>
					<view class="demo-btn secondary-btn">次要按钮</view>
					<view class="demo-btn success-btn">成功按钮</view>
					<view class="demo-btn warning-btn">警告按钮</view>
					<view class="demo-btn error-btn">错误按钮</view>
				</view>
				<view class="demo-cards">
					<view class="demo-card">
						<text class="card-title">卡片标题</text>
						<text class="card-content">这是卡片内容，展示文字层级和背景色彩的搭配效果。</text>
						<view class="card-actions">
							<text class="card-link">查看详情</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 使用建议 -->
		<view class="color-section">
			<view class="section-title">使用建议</view>
			<view class="suggestions">
				<view class="suggestion-item">
					<view class="suggestion-icon success">✓</view>
					<text class="suggestion-text">保持色彩使用的一致性，同类元素使用相同颜色</text>
				</view>
				<view class="suggestion-item">
					<view class="suggestion-icon success">✓</view>
					<text class="suggestion-text">确保文字与背景有足够的对比度，提升可读性</text>
				</view>
				<view class="suggestion-item">
					<view class="suggestion-icon warning">⚠</view>
					<text class="suggestion-text">避免在同一界面使用过多颜色，保持视觉简洁</text>
				</view>
				<view class="suggestion-item">
					<view class="suggestion-icon error">✕</view>
					<text class="suggestion-text">不要随意改变品牌色，保持品牌形象统一</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import BrandButton from '../../components/BrandButton.vue'
import BrandCard from '../../components/BrandCard.vue'

// 测试类型数据
const testTypes = ref([
	{ name: '反应测试', icon: '⚡', color: '#F1C40F', class: 'reaction' },
	{ name: '记忆测试', icon: '🧠', color: '#1ABC9C', class: 'memory' },
	{ name: '数字测试', icon: '🔢', color: '#3498DB', class: 'number' },
	{ name: '视觉测试', icon: '👁', color: '#E67E22', class: 'visual' },
	{ name: '打字测试', icon: '⌨️', color: '#9B59B6', class: 'typing' },
	{ name: '语音测试', icon: '🎵', color: '#E74C3C', class: 'voice' },
	{ name: '黑猩猩测试', icon: '🐵', color: '#27AE60', class: 'chimp' }
])

// IQ等级数据
const iqLevels = ref([
	{ name: '天才级', range: '140+', color: '#9B59B6', class: 'genius' },
	{ name: '极优秀', range: '130-139', color: '#3498DB', class: 'excellent' },
	{ name: '优秀', range: '120-129', color: '#2ECC71', class: 'good' },
	{ name: '中上', range: '110-119', color: '#F39C12', class: 'above-average' },
	{ name: '中等', range: '90-109', color: '#95A5A6', class: 'average' },
	{ name: '待提升', range: '<90', color: '#E74C3C', class: 'below-average' }
])

// 组件交互处理
const handleButtonClick = () => {
	console.log('按钮被点击')
}

const handleCardClick = () => {
	console.log('卡片被点击')
}
</script>

<style lang="scss" scoped>

.color-demo-container {
	padding: 20rpx;
	background: $bg-secondary;
	min-height: 100vh;
}

// 页面标题
.demo-header {
	text-align: center;
	margin-bottom: 40rpx;
	padding: 40rpx 20rpx;
	background: $brand-gradient-main;
	border-radius: 20rpx;

	.demo-title {
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		display: block;
		margin-bottom: 10rpx;
	}

	.demo-subtitle {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		display: block;
	}
}

// 色彩区块
.color-section {
	margin-bottom: 40rpx;

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: $text-primary;
		margin-bottom: 20rpx;
		display: block;
	}
}

// 主品牌色网格
.color-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;

	.color-card {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: $shadow-light;

		.color-preview {
			height: 120rpx;
			border-radius: 15rpx;
			margin-bottom: 20rpx;

			&.primary-color {
				background: $brand-primary;
			}

			&.secondary-color {
				background: $brand-secondary;
			}
		}

		.color-info {
			.color-name {
				font-size: 32rpx;
				font-weight: bold;
				color: $text-primary;
				display: block;
				margin-bottom: 8rpx;
			}

			.color-code {
				font-size: 24rpx;
				color: $text-tertiary;
				font-family: monospace;
				display: block;
				margin-bottom: 8rpx;
			}

			.color-desc {
				font-size: 26rpx;
				color: $text-secondary;
				display: block;
			}
		}
	}
}

// 组件使用示例样式
.section-desc {
	font-size: 26rpx;
	color: $text-secondary;
	margin-bottom: 30rpx;
	display: block;
}

.component-demo {
	margin-bottom: 40rpx;

	.component-title {
		font-size: 30rpx;
		font-weight: bold;
		color: $text-primary;
		margin-bottom: 20rpx;
		display: block;
	}
}

.button-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15rpx;
	margin-bottom: 30rpx;
}

.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20rpx;
}

// 渐变展示
.gradient-showcase {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;

	.gradient-card {
		height: 150rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: white;

		&.main-gradient {
			background: $brand-gradient-main;
		}

		&.reverse-gradient {
			background: $brand-gradient-reverse;
		}

		.gradient-text {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 8rpx;
		}

		.gradient-desc {
			font-size: 24rpx;
			opacity: 0.9;
		}
	}
}

// 功能色彩
.function-colors {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15rpx;

	.function-card {
		background: white;
		border-radius: 15rpx;
		padding: 25rpx;
		text-align: center;
		box-shadow: $shadow-light;

		.function-icon {
			font-size: 40rpx;
			margin-bottom: 10rpx;
			display: block;
		}

		.function-name {
			font-size: 28rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 5rpx;
		}

		.function-code {
			font-size: 22rpx;
			font-family: monospace;
			color: $text-tertiary;
			display: block;
		}

		&.success-card {
			.function-icon, .function-name {
				color: $success-color;
			}
		}

		&.warning-card {
			.function-icon, .function-name {
				color: $warning-color;
			}
		}

		&.error-card {
			.function-icon, .function-name {
				color: $error-color;
			}
		}

		&.info-card {
			.function-icon, .function-name {
				color: $info-color;
			}
		}
	}
}

// 测试类型色彩
.test-colors {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15rpx;

	.test-card {
		background: white;
		border-radius: 15rpx;
		padding: 25rpx;
		text-align: center;
		box-shadow: $shadow-light;

		.test-icon {
			font-size: 36rpx;
			margin-bottom: 10rpx;
			display: block;
		}

		.test-name {
			font-size: 28rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 5rpx;
		}

		.test-color {
			font-size: 22rpx;
			font-family: monospace;
			color: $text-tertiary;
			display: block;
		}

		&.reaction .test-name { color: $reaction-color; }
		&.memory .test-name { color: $memory-color; }
		&.number .test-name { color: $number-color; }
		&.visual .test-name { color: $visual-color; }
		&.typing .test-name { color: $typing-color; }
		&.voice .test-name { color: $voice-color; }
		&.chimp .test-name { color: $chimp-color; }
	}
}

// IQ等级色彩
.iq-levels {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15rpx;

	.iq-card {
		background: white;
		border-radius: 15rpx;
		padding: 25rpx;
		text-align: center;
		box-shadow: $shadow-light;

		.iq-score {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 8rpx;
			display: block;
		}

		.iq-name {
			font-size: 28rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 5rpx;
		}

		.iq-color {
			font-size: 22rpx;
			font-family: monospace;
			color: $text-tertiary;
			display: block;
		}

		&.genius .iq-score, &.genius .iq-name { color: $iq-genius; }
		&.excellent .iq-score, &.excellent .iq-name { color: $iq-excellent; }
		&.good .iq-score, &.good .iq-name { color: $iq-good; }
		&.above-average .iq-score, &.above-average .iq-name { color: $iq-above-average; }
		&.average .iq-score, &.average .iq-name { color: $iq-average; }
		&.below-average .iq-score, &.below-average .iq-name { color: $iq-below-average; }
	}
}

// 文字层级
.text-hierarchy {
	background: white;
	border-radius: 15rpx;
	padding: 30rpx;
	box-shadow: $shadow-light;

	text {
		display: block;
		margin-bottom: 15rpx;
		font-size: 28rpx;

		&.text-primary {
			color: $text-primary;
			font-weight: bold;
		}

		&.text-secondary {
			color: $text-secondary;
		}

		&.text-tertiary {
			color: $text-tertiary;
		}

		&.text-disabled {
			color: $text-disabled;
		}
	}
}

// 交互演示
.interaction-demo {
	.demo-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		margin-bottom: 30rpx;

		.demo-btn {
			padding: 20rpx 30rpx;
			border-radius: 25rpx;
			font-size: 28rpx;
			font-weight: bold;
			text-align: center;
			transition: $transition-fast;

			&:active {
				transform: scale(0.95);
			}

			&.primary-btn {
				background: $brand-primary;
				color: white;
			}

			&.secondary-btn {
				background: $brand-secondary;
				color: white;
			}

			&.success-btn {
				background: $success-color;
				color: white;
			}

			&.warning-btn {
				background: $warning-color;
				color: white;
			}

			&.error-btn {
				background: $error-color;
				color: white;
			}
		}
	}

	.demo-cards {
		.demo-card {
			background: white;
			border-radius: 20rpx;
			padding: 30rpx;
			box-shadow: $shadow-medium;

			.card-title {
				font-size: 32rpx;
				font-weight: bold;
				color: $text-primary;
				display: block;
				margin-bottom: 15rpx;
			}

			.card-content {
				font-size: 28rpx;
				color: $text-secondary;
				line-height: 1.5;
				display: block;
				margin-bottom: 20rpx;
			}

			.card-actions {
				.card-link {
					color: $brand-primary;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}
	}
}

// 使用建议
.suggestions {
	.suggestion-item {
		background: white;
		border-radius: 15rpx;
		padding: 25rpx;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
		box-shadow: $shadow-light;

		.suggestion-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			font-size: 28rpx;
			font-weight: bold;

			&.success {
				background: $success-bg;
				color: $success-color;
			}

			&.warning {
				background: $warning-bg;
				color: $warning-color;
			}

			&.error {
				background: $error-bg;
				color: $error-color;
			}
		}

		.suggestion-text {
			flex: 1;
			font-size: 28rpx;
			color: $text-secondary;
			line-height: 1.4;
		}
	}
}
</style>